<template>
  <a-card :bordered="false">
    <a-form :form="form" :spinning="loading">
      <a-form-item label="平台简称" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-decorator="['title', validatorRules.title]" placeholder="请输入平台简称(不超过七个字)"></a-input>
      </a-form-item>
      <a-form-item label="系统图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <j-image-upload class="avatar-uploader" text="上传" v-model="fileList"></j-image-upload>
      </a-form-item>
      <a-form-item label="系统ICO" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <j-image-upload class="avatar-uploader" text="上传" v-model="icoFileList"></j-image-upload>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" style="text-align:center">
        <a-button type="primary" @click="handleSubmit">保存</a-button>
        <!-- <a-button style="margin-left: 8px">保存</a-button> -->
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import JImageUpload from '@/components/jeecg/JImageUpload'
import { getSysCustomConfig, editSysCustomConfig } from './service'
import pick from 'lodash.pick'
import { TENANT_ID } from '@/store/mutation-types'
import Vue from 'vue'
import { apiUrl } from '@/api/api.js'

export default {
  name: 'SysCustomConfig',
  components: {
    JImageUpload
  },
  data() {
    return {
      loading: false,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      validatorRules: {
        title: { rules: [{ required: true, message: '请输入平台简称' }, { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }] }
      },
      url: {
        fileUpload: apiUrl.fileUpload
      },
      fileList: '',
      icoFileList: '',
      model: {}
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    uploadAction: function() {
      return this.url.fileUpload
    }
  },
  methods: {
    loadData() {
      let that = this
      let params = {
        authFlag: 1
      };
      getSysCustomConfig(Vue.ls.get(TENANT_ID), params)
        .then(res => {
          // 请求成功
          if (res.success) {
            this.model = res.result
            this.edit(res.result)
          } else {
            // 请求失败
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.loading = false
        })
    },
    // add () {
    //   this.picUrl = '';
    //   this.refresh();
    //   this.edit();
    // },
    edit(record) {
      let that = this
      that.form.resetFields()
      that.model = Object.assign({}, record)
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(that.model, 'title'))
        setTimeout(() => {
          that.fileList = that.model.iconUrl
          that.icoFileList = that.model.icoUrl
        }, 5)
      })
    },
    // 提交保存
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.loading = true
          let formData = Object.assign(this.model, values)
          if (that.fileList !== '') {
            formData.iconUrl = that.fileList
          } else {
            formData.iconUrl = null
          }
          if (that.icoFileList !== '') {
            formData.icoUrl = that.icoFileList
          } else {
            formData.icoUrl = null
          }
          formData.authFlag = 1;
          editSysCustomConfig(formData)
            .then(res => {
              if (res.success) {
                this.model = res.result
                this.edit(this.model)
                this.$store.commit('SET_SYSTEM_CONFIG', {
                  iconUrl: res.result.iconUrl,
                  title: res.result.title,
                  icoUrl: res.result.icoUrl
                })
                this.$store.dispatch('setSystemConfig')
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.loading = false
            })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.avatar-uploader > .ant-upload {
  width: 120px;
  height: 120px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
